const tab_list = document.querySelector('.tab_list');
const lis = tab_list.querySelectorAll('.tab_list ul li');
const items = document.querySelectorAll('.item');
// for 循环绑定点击事件
for (let i = 0; i < lis.length; i++) {
    // 开始给5个小li设置索引号 
    lis[i].setAttribute('index', i);
    // 2.上面的模块选项卡
    lis[i].onclick = function () {
        // 干掉所有人 其余的li清除 class 这个类
        for (let i = 0; i < lis.length; i++) {
            lis[i].className = '';
        }
        // 留下我自己
        this.className = 'current';

        // 2.下面的显示内容模块
        let index = this.getAttribute('index');
        console.log(index);
        // 干掉所有人 让其余的item 这些div隐藏
        for (let j = 0; j < items.length; j++) {
            items[j].style.display = 'none';
        }
        // 留下我自己 让对应的item 显示出来
        items[index].style.display = 'block';

    }
}